<template>
    <div class="loginback">
        <div class="module">
            <div class="title">问卷调查管理系统</div>
            <el-form ref="form" :model="forms" :rules="rules">
                <el-form-item prop="username">
                    <el-input placeholder="请输入账号" v-model="forms.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="forms.password" type="password"></el-input>
                </el-form-item>
                <el-form-item prop="repassword">
                    <el-input placeholder="请输入确认密码" v-model="forms.repassword" type="password"></el-input>
                </el-form-item>
                <el-button type="primary" @click="register" style="width: 100%;">注册</el-button>
                <div class="tip">已有账号？去 <span @click="login()">登录</span> </div>
            </el-form>
        </div>

    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import service from '../request/Request';
import { ElMessage } from 'element-plus';
import router from '../router';
const forms = ref({
    username: "",
    password: "",
    roles: 0
})
const form = ref(null)
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },

    ],
    repassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },

    ]
}
onMounted(() => {

})
const register = async () => {
    form.value.validate(async (valid) => {
        if (valid) {
            if (forms.value.repassword !== forms.value.password) {
                return ElMessage({
                    message: "两次输入密码不一致",
                    type: 'warning',
                    plain: true,
                })
            }
            const res = await service.post("/register", forms.value);
            console.log(res)
            if (res.code == 200) {
                ElMessage({
                    message: "注册成功",
                    type: 'success',
                    plain: true,
                })
            }
        }
    })

}
const login = () => {
    router.push({
        path: "/"
    })
}
</script>

<style scoped>
.loginback {
    width: 100%;
    height: 100%;
    background: url("../assets/back.jpg");
    display: flex;
    align-items: center;
    justify-content: center;

}

.module {
    width: 350px;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 50%) 0px 0px 10px;
}

.title {
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
    text-align: center;
}

.tip {
    text-align: right;
    margin-top: 10px;
    font-size: 15px;

}

.tip span {
    color: #409eff;
    cursor: pointer;
}
</style>
